<script setup lang="ts">
// 此处可以添加必要的 TypeScript 逻辑
</script>

<template>
  <div class="footer_wrap">
    <router-link to="/find">发现音乐</router-link>
    <router-link to="/my">我的</router-link>
    <router-link to="/friend">朋友</router-link>
  </div>

  <div class="top">
    <router-view></router-view>
  </div>
</template>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

.footer_wrap {
  display: flex;
  justify-content: space-around;
  /* 使用 space-around 使链接均匀分布 */
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}

.footer_wrap a {
  flex: 1;
  padding: 20px 0;
  text-decoration: none;
  color: #ccc;
  border: 1px solid transparent;
  /* 设置透明边框以确保不改变布局 */
  transition: background-color 0.3s, border-color 0.3s;
  /* 增加过渡效果 */
}

.footer_wrap a.router-link-active {
  background-color: #560303;
  border-color: #666;
  /* 增加活动链接的边框颜色 */
}

.footer_wrap a:hover {
  background-color: #555;
  border-color: #888;
  /* 增加悬停时的边框颜色 */
}
</style>
